<template>
  <view class="all">
    <view
      class="yh"
      :style="{ backgroundImage: 'url(' + userInfo.userBackground + ')' }"
    >
      <view class="yhgn">
        <view class="yhsz"></view>
        <view class="yhfx" @click="gotoPageSetByMouseClick"></view>
      </view>

      <view class="yhzl">
        <view
          class="yhtx"
          :style="{ backgroundImage: 'url(' + userInfo.userAvatar + ')' }"
        ></view>

        <view class="yhxx">
          <view class="yhname" v-text="userInfo.userName"
            >123小懿同学要努力</view
          >
          <view class="yhh">美食号：{{ userInfo.userId }}</view>
          <view class="yhdq"> ip属地：湖南</view>
        </view>
      </view>

      <view class="yhms">
        {{ userInfo.userIntroduce }}
      </view>

      <!-- <view class="yhxz"><span>♀</span>白羊座</view> -->
    </view>

    <view class="new-file">
      <!-- 第一种方法 -->
      <!-- 头部选项卡 -->
      <view class="head-nav">
        <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)"
          >历史</view
        >
        <view :class="navIndex == 2 ? 'activite' : ''" @click="checkIndex(2)"
          >收藏</view
        >
        <view :class="navIndex == 3 ? 'activite' : ''" @click="checkIndex(3)"
          >打卡</view
        >
      </view>
      <!-- 内容切换 -->
      <!-- 收藏内容 -->
      <view class="content" v-if="navIndex == 2" id="content1">
        <view class="ls">
          <view
            class="ls1"
            v-for="arr in FavoritesList"
            :key="arr.foodId"
            @click="gotoDetailPageByFoodId(arr.foodId)"
          >
            <view class="lstp">
              <image
                :src="arr.foods.foodImage1"
                mode=""
                class="lsimage"
              ></image>
            </view>

            <view class="lsname" v-text="arr.foods.foodName">糖油粑粑</view>
            <view class="lspf">
              <u-rate
                v-model="arr.foods.foodScore"
                :disabled="true"
                active-color="#ffac2b"
                size="28"
              ></u-rate>
              {{ arr.foods.foodScore.toFixed(1) }}
            </view>
          </view>
        </view>
      </view>

      <!-- 历史内容 -->
      <view class="content" v-if="navIndex == 1">
        <!-- 收藏内容，sc收藏【1，1000】,pf评分,ms描述 -->
        <view class="sc" v-for="arr in historyArray" :key="arr.id">
          <view class="sc1" @click="gotoDetailPageByFoodId(arr.foodId)">
            <!-- 美食头像 -->
            <view class="sctx">
              <image
                :src="arr.foods.foodImage1"
                mode=""
                class="scimage"
              ></image>
            </view>

            <view class="scxx">
              <view class="scname" v-text="arr.foods.foodName">糖油粑粑</view>
              <view class="scpf"
                >推荐指数：
                <u-rate
                  v-model="arr.foods.foodScore"
                  :disabled="true"
                  active-color="#ffac2b"
                  size="32"
                ></u-rate>
                {{ arr.foods.foodScore.toFixed(1) }}
              </view>
              <view class="scms" v-text="arr.foods.foodIntroduce"
                >早上三个糖油粑粑下肚，可饱一天精神，充沛体力</view
              >
            </view>

            <view class="sctime">
              <!-- 地区 -->
              <view class="scdq" v-text="arr.foods.foodLocation">湖南</view>
              <!-- 时间 -->
              <view class="sctimexx" v-text="arr.collectionTime"
                >2023年4月9日</view
              >
            </view>
          </view>
        </view>
      </view>

      <!-- 打卡内容 -->
      <view class="content" v-if="navIndex == 3">
        <view class="dk" v-for="arr in CommentList" :key="arr.commentId">
          <!-- 左部分内容 -->
          <view class="dkleft" @click="gotoDetailPageByFoodId(arr.foodId)">
            <!-- 头像 -->
            <view class="dktx">
              <image
                :src="arr.foods.foodImage1"
                mode=""
                class="dkimage"
              ></image>
            </view>
          </view>

          <!-- 右部分内容 -->
          <view class="dkright" @click="gotoDetailPageByFoodId(arr.foodId)">
            <!-- 打卡详细 -->
            <view class="dkxx">
              <!-- 名字 -->
              <view class="dkname" v-text="arr.foods.foodName">宫保鸡丁</view>

              <!-- 打卡评分 -->
              <view class="dkpf"
                >我的评分：
                <u-rate
                  v-model="arr.commentStar"
                  :disabled="true"
                  active-color="#ffac2b"
                  size="28"
                ></u-rate>
                {{ arr.commentStar.toFixed(1) }}
              </view>

              <!-- 打卡描述 -->
              <view class="dkms" v-text="arr.commentContent"
                >香喷喷的宫保鸡丁上桌了，香味直往我鼻子里钻。蔬菜色彩鲜艳，鸡丁白色，辣椒油红色。吃一口宫保鸡丁，有点辣，有点甜，有点酸。感觉能干掉一大碗米饭。</view
              >
            </view>

            <!-- 打卡图片 -->
            <!-- <view class="dktp">
						
					</view> -->

            <!-- 打卡时间 -->
            <view class="dktime">
              <!-- 时间 -->
              <view class="dktimexx" v-text="arr.commentTime"
                >2023年4月9日</view
              >

              <!-- 地区 -->
              <view class="dkdq" v-text="arr.foods.foodLocation">湖南</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "login-after",
  data() {
    return {
      navIndex: 1,

      navList: ["选项卡一", "选项卡二", "选项卡三"],
      listIndex: 0,
    };
  },
  methods: {
    gotoPageSetByMouseClick() {
      uni.navigateTo({
        url: "/pages/set/set",
      });
    },
    gotoDetailPageByFoodId(foodId) {
      //   console.log("foodId", foodId);
      uni.navigateTo({
        url: `/pages/details/details?foodId=${foodId}`,
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    checkIndex(index) {
      this.navIndex = index;
    },

    checkListIndex(index) {
      this.listIndex = index;
    },
  },
  onShow() {},
  computed: {
    // 获取历史记录列表 获取数据
    ...mapState("moduleLoginAfter", [
      "historyArray",
      "user",
      "FavoritesList",
      "CommentList",
      "userInfo",
    ]),
  },
};
</script>

<style lang="scss">
::v-deep .u-rate {
  margin-top: -4rpx !important;
}

view {
  vertical-align: middle;
}

.all {
  .yh {
    width: 100%;
    height: 600rpx;
    // background-color: green;
    background-image: url("https://pic1.zhimg.com/v2-864c4d65a281efa244b6ec6c5ffbb010_r.jpg?source=1940ef5c");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    color: white;
    .yhgn {
      width: 100%;
      height: 50rpx;
      .yhsz {
        width: 10%;
        height: 50rpx;
        // background-color: white;
        // background-image: url("../../static/lxy/设置.png");
        background-size: 60rpx;
        background-repeat: no-repeat;
        background-position: 12rpx 0rpx;
        float: left;
      }
      .yhfx {
        width: 10%;
        height: 50rpx;
        // background-color: green;
        background-image: url("../../static/images/设置.png");
        background-size: 50rpx;
        background-repeat: no-repeat;
        background-position: 12rpx 5rpx;
        float: right;
      }
    }
    .yhzl {
      margin-top: 50rpx;
      .yhtx {
        width: 140rpx;
        height: 140rpx;
        // background-color: green;
        border-radius: 50%;
        margin-left: 15rpx;
        display: inline-block;
        background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.e56e414a9cf7635dca125076724c7ed0?rik=ELqe4OqCMaB0nA&riu=http%3a%2f%2fwww.baby611.com%2fpic%2fuserup%2f1906%2f10105354S59.jpg&ehk=vNeTth1gPnRCRkaNp9BiB0eidbHPvfNMkfyjq436cYM%3d&risl=&pid=ImgRaw&r=0");
        background-size: 150rpx;
        background-repeat: no-repeat;
        background-position: center center;
      }
      .yhxx {
        width: 50%;
        height: 140rpx;
        // background-color: green;
        margin-left: 45rpx;
        display: inline-block;
        .yhname {
          height: 50rpx;
          // background-color: red;
          font-size: 42rpx;
        }
        .yhh {
          height: 30rpx;
          // background-color: red;
          font-size: 20rpx;
          margin-top: 25rpx;
          color: rgb(194, 194, 194);
        }
        .yhdq {
          height: 30rpx;
          // background-color: red;
          font-size: 20rpx;
          margin-top: 5rpx;
          color: rgb(194, 194, 194);
        }
      }
    }
    .yhms {
      width: 70%;
      height: 150rpx;
      // background-color: red;
      margin-top: 35rpx;
      margin-left: 3%;
      line-height: 42rpx;
    }
    .yhxz {
      width: 20%;
      height: 50rpx;
      background-color: rgb(102, 98, 95);
      margin-top: 30rpx;
      margin-left: 3%;
      text-align: center;
      line-height: 50rpx;
      border-radius: 35rpx;
    }
    span {
      color: rgb(186, 144, 150);
      padding-right: 10rpx;
    }
  }
}

.new-file {
  width: 100%;
  height: 600rpx;
  // background-color: chartreuse;
  border-radius: 35px 35px 0 0;
}

.head-nav {
  width: 50%;
  margin: 20rpx auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(139, 139, 139);
  // background-color: aqua;
}

.activite {
  font-weight: bold;
  border-bottom: 6rpx solid red;
  color: black;
  // background-color:red;
}

.head-nav > view {
  padding-bottom: 10rpx;
  // background-color: #0065d9;
}

.content {
  width: 100%;
  // height: 2500rpx;
  background-color: rgb(237, 237, 237);
  border-top: 1px solid rgb(241, 241, 241);
}

// 收藏内容
#content1 {
  background-color: rgb(237, 237, 237);
}
.sc {
  width: 100%;
  height: 300rpx;
  background-color: white;
  // margin: 0 auto;
  margin-top: 25rpx;
  display: inline-block;
  border-radius: 35rpx;
  padding-top: 20rpx;
  .sc1 {
    width: 95%;
    height: 280rpx;
    // background-color: bisque;
    margin: 0 auto;
    margin-top: 10rpx;
    .sctx {
      width: 250rpx;
      height: 220rpx;
      // background-color: red;
      display: inline-block;
      .scimage {
        width: 250rpx;
        height: 220rpx;
      }
    }
    .scxx {
      width: 440rpx;
      height: 220rpx;
      // background-color: red;
      margin-left: 20rpx;
      display: inline-block;
      border-left: 2px solid rgb(181, 181, 181);

      .scname {
        width: 440rpx;
        height: 45rpx;
        // background-color: blue;
        padding-left: 15rpx;
        margin-top: 10rpx;
        font-size: 40rpx;
      }
      .scpf {
        width: 440rpx;
        height: 45rpx;
        // background-color: blue;
        margin-top: 20rpx;
        padding-left: 15rpx;
      }
      .scms {
        width: 440rpx;
        height: 110rpx;
        // background-color: blue;
        margin-top: 10rpx;
        padding-left: 15rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
    .sctime {
      width: 100%;
      height: 50rpx;
      // background-color: red;
      margin-top: 10rpx;
      color: rgb(181, 181, 181);
      .scdq {
        width: 15%;
        height: 50rpx;
        // background-color: blue;
        float: left;
        display: inline-block;
        text-align: center;
      }
      .sctimexx {
        width: 35%;
        height: 50rpx;
        // background-color: blue;
        float: right;
        display: inline-block;
        text-align: center;
      }
    }
  }
}

// 历史内容
.ls {
  width: 100%;
  // height: 340rpx;
  // background-color: greenyellow;
  // margin-top: 20rpx;
  .ls1,
  .ls2,
  .ls3 {
    width: 30%;
    height: 320rpx;
    // background-color: green;
    display: inline-block;
    margin-left: 20rpx;
    margin-top: 20rpx;
    .lstp {
      width: 100%;
      height: 200rpx;
      // background-color: red;
      .lsimage {
        width: 100%;
        height: 200rpx;
      }
    }
    .lsname {
      width: 100%;
      height: 50rpx;
      // background-color: red;
      margin-top: 10rpx;
      text-align: center;
      line-height: 50rpx;
      font-size: 32rpx;
    }
    .lspf {
      width: 100%;
      height: 40rpx;
      // background-color: red;
      margin-top: -4rpx;
      text-align: center;
      line-height: 40rpx;
      font-size: 25rpx;
    }
  }
}

// 打卡内容
.dk {
  width: 90%;
  height: 320rpx;
  background-color: white;
  margin-top: 40rpx;
  margin-left: 5%;
  .dkleft {
    width: 15%;
    height: 320rpx;
    // background-color: red;
    display: inline-block;
    .dktx {
      width: 100%;
      height: 100rpx;
      // background-color: blue;
      padding-left: 10rpx;
      padding-top: 10rpx;
      .dkimage {
        width: 100%;
        height: 100rpx;
      }
    }
  }
  .dkright {
    width: 80%;
    height: 320rpx;
    // background-color: red;
    display: inline-block;
    margin-left: 20rpx;

    .dkxx {
      width: 100%;
      height: 260rpx;
      // background-color: lemonchiffon;
      .dkname {
        width: 100%;
        height: 50rpx;
        // background-color: aqua;
        font-size: 38rpx;
        // color: blue;
      }

      .dkpf {
        width: 100%;
        height: 40rpx;
        // background-color: aqua;
        margin-top: 5rpx;
      }

      .dkms {
        width: 100%;
        height: 150rpx;
        // background-color: aqua;
        margin-top: 10rpx;
      }
    }

    // .dktp{
    // 	    width: 80%;
    // 	    height: 300rpx;
    // 	    background-color: aqua;
    // 	    margin-top: 10rpx;
    // 		margin-left: 10%;
    //      }

    .dktime {
      width: 100%;
      height: 50rpx;
      // background-color: blue;
      margin-top: 10rpx;
      color: rgb(181, 181, 181);

      .dktimexx {
        width: 40%;
        height: 50rpx;
        // background-color: green;
        display: inline-block;
        float: left;
        // text-align: center;
      }
      .dkdq {
        width: 20%;
        height: 50rpx;
        // background-color: green;
        display: inline-block;
        margin-left: 20rpx;
        float: right;
        text-align: center;
      }
    }
  }
}
</style>
